<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  main {
    /*height: 300px;
    width: 300px;*/
    border: 1px solid;
  }
  /*基于绝对定位的解决方案*/
  /*main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em;
    /* 6/2 = 3 
    margin-left: -9em;
    /* 18/2 = 9 
    width: 18em;
    height: 6em;
  }*/
  /*main {
    position: absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
  }*/
  /*显然，这个方法最大的局限在于它要求元素的宽高是固定的。在通常情
况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果
能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题
就迎刃而解了！遗憾的是，对于绝大多数CSS 属性（包括margin）来说，
百分比都是以其父元素的尺寸为基准进行解析的*/
  /*。当我们在
translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度
为基准进行换算和移动的，而这正是我们所需要的。接下来，只要换用基于
百分比的CSS 变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸
写死了。这样我们就可以彻底解除对固定尺寸的依赖：*/
  /*main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }*/
  /*基于视口单位的解决方案*/
  /*假设我们不想使用绝对定位，仍然可以采用translate() 技巧来把这
个元素以其自身宽高的一半为距离进行移动；但是在缺少left 和top 的情
况下，如何把这个元素的左上角放置在容器的正中心呢？*/
  /*main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50% auto 0;
    transform: translateY(-50%);
  }*/
  /*这段代码会产生十分离谱的结果。原因在于
margin 的百分比值是以父元素的宽度作为解析基准的。没错，即使对于
margin-top 和margin-bottom 来说也是这样！*/
  
  main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
  }
</style>

<body>
  <main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
  </main>
</body>

</html>